<template>
   <el-row class="wapper">
       <el-row class="title">评论</el-row>
       <el-row class="reply-tag" :disable-transitions="false">
          <el-tag type="info" closable v-if="parentInfo"  @close="handleCloseTag">回复 @{{parentInfo.nickname}}</el-tag>
       </el-row>
       <el-row class="reply-wapper">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="说点什么吧..."
            v-model="content"
            >
            </el-input>
       </el-row>
       <el-row class="picwall-wapper" type="flex" justify="space-between">
           <el-row class="pic-wall">
               <el-upload
                    list-type="picture-card"
                    :action="$axios.defaults.baseURL + '/upload'"
                    :on-success="coverSuccess"
                    :on-remove="coverRemove"
                    :on-preview="handlePictureCardPreview"
                    :file-list="pics"
                    name="files"
                    >
                    <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
           </el-row>
            <el-row class="btnwapper">
                <el-button type="primary" size="small" @click.native="submitReplys">提交</el-button>
            </el-row>
       </el-row>
       <el-row class="postAreaWapper">
           <el-row class="post-area" v-for="(item,index) in commentsList" :key="index" >
               <div>
               <el-row class="userinfo" type="flex" justify="space-between">
               <el-row class="user-pic">
                   <img :src="$axios.defaults.baseURL + item.account.defaultAvatar" alt="">
                   <span>{{item.account.nickname}}</span>
                   <span>{{item.created_at}}</span>
               </el-row>
               <el-row class="reply-num">{{item.level}}</el-row>
               </el-row>
                <el-row class="content">
                    <ParentComment v-if="item.parent" :commentData="item.parent" 
                    @parentCallReply="parentCallReply" 
                    />
                    <el-row class="words">{{item.content}}</el-row>
                    <el-row class="pic">
                        <el-row class="pic-item" v-for="it in item.pics" :key="it.id">
                            <img :src="$axios.defaults.baseURL + it.url" alt=""/>
                        </el-row>
                    </el-row>
                    <el-row class="replyWapper">
                        <span class="reply" @click="callReply(index)">回复</span>
                    </el-row>
                </el-row>
                </div>
           </el-row>
       </el-row>
       <el-pagination
       align="center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="[3, 5, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="commentsTotal">
    </el-pagination>
   </el-row>
</template>

<script>
import moment from "moment"
import ParentComment from '@/components/tourismStrategy/comment/ParentComment'
export default {
    data(){
        return{
            pics:[],
            content:'',
            dialogImageUrl: '',
            dialogVisible: false,
            commentsList:[],
            commentsTotal:0,
            pageIndex:0,
            pageSize:3,
            parentInfo:null
        }
    },
    components:{
        ParentComment 
    },
    methods:{
        coverSuccess(res, file){
            // 上传组件成功上传可以接受三个参数
            // res 请求结果
            // file 文件本身
            // fileList 文件列表
            // 1. 需要将 file 文件放入 this.form.cover 数组里面
            // 2. 我们的封面需要 id 这个 id 是从服务器传回来的
            file.id = res[0].id;
            this.pics.push(file);
            // 提交时还需处理
        },
        coverRemove(file,fileList){
            this.pics = fileList;
        },
        handlePictureCardPreview(file){
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        loadComments(){
            this.$axios({
                url:'/posts/comments',
                params:{
                   post:this.$route.query.id,
                   _start:this.pageIndex,
                   _limit:this.pageSize
                }
            }).then(res => {
                this.commentsList = res.data.data;
                this.commentsTotal = res.data.total;
                // 传值给父组件改变评论数量
                this.$emit('loadCommentCount', res.data.total);
                this.commentsList.forEach(item => {
                    if(item){
                       this.recursionDealData(item);
                    }
                });
            })
        },
        // 递归处理数据
        recursionDealData(item){
            if(item.created_at){
                item.created_at = moment(parseInt(item.created_at)).format('YYYY-MM-DD hh:mm');
            }
            if(item.parent){
               this.recursionDealData(item.parent);
            }
        },
        submitReplys(){
            if(!this.content && this.pics.length <= 0){
                this.$message.warning('还没写评论呢');
                return;
            }
            const picList = this.pics.map(item => {
                return {
                    ...item.response[0]
                }
            });
            this.$axios({
                url:'/comments',
                method:'post',
                data:{
                    content:this.content,
                    pics:picList,
                    follow: this.parentInfo == null ? '' :this.parentInfo.followId,
                    post: this.$route.query.id
                },
                headers:{
                   Authorization:'Bearer ' + this.$store.state.user.userInfo.token
                }
            }).then(res => {
                if(res.data.message == '提交成功'){
                    this.$message.success(res.data.message);
                    this.pics = [];
                    this.content = '';
                    this.loadComments();
                }
            })
        },
        handleSizeChange(val){
            this.pageSize = val;
            this.loadComments();
        },
        handleCurrentChange(val){
            this.pageIndex = val;
            this.loadComments();
        },
        parentCallReply(parentInfo){
            this.parentInfo = parentInfo;
        },
        callReply(index){
            this.parentInfo = {
                followId:this.commentsList[index].id,
                nickname:this.commentsList[index].account.nickname 
            }
        },
        handleCloseTag(){
            this.parentInfo = null;
        }
    },
    mounted(){
        this.loadComments();
    }
}
</script>

<style lang="less" scoped>
.wapper{
    .title{
        font-size: 18px;
    }
    .reply-tag{
        margin:20px 0 9px;
    }
    .reply-wapper{
        text-align: right;
        /deep/.el-input{
            resize:none;
        }
    }
    .picwall-wapper{
        margin-top:10px;
        .pic-wall{
            /deep/.el-upload--picture-card {
                width: 100px;
                height: 100px;  
                line-height: 100px;
            }
            /deep/.el-upload-list--picture-card .el-upload-list__item {
                width: 100px;
                height: 100px;
            }
        }
        .btnWapper{
            margin-left: 20px;
            /deep/.el-button{
                margin-top: 9px;
            }
        }
    }
    .postAreaWapper{
        margin-top: 40px;
        border:1px solid #DDDDDD;
        .post-area{
            border-bottom:1px dashed #DDDDDD;
            &:last-child{
                border-bottom:0;
            }
            .userinfo{
                padding:22px 20px 0;
                .user-pic{
                    img{
                        width:15px;
                        height:15px;
                        border-radius: 50%;
                        vertical-align: middle;
                    }
                    span{
                        font-size: 12px;
                        color: #666666;
                        &:last-child{
                            color: #999999;
                        }
                    }
                }
                .reply-num{
                    font-size: 12px;
                    color: #999999;
                }
            }
            .content{
                padding:12px 20px 10px 50px;
                .words{
                    padding-top: 12px;
                    font-size: 16px;
                    color: #333;
                }
                .pic{
                    display:flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    margin-top: 10px;
                    .pic-item{
                        width: 82px;
                        height: 90px;
                        text-align: center;
                        line-height: 90px;
                        margin-right: 5px;
                        margin-bottom: 5px;
                        border:1px dashed #DDDDDD;
                        border-radius: 5px;
                        img{
                            width: 72px;
                            height: 82px;
                            object-fit: contain;//覆盖
                        }
                    }
                }
                .replyWapper{
                    height:14px;
                    text-align: right;
                    .reply{
                       opacity:1;
                       font-size: 12px; 
                       color: #2640E1;
                       cursor: pointer;
                       &:hover{
                           text-decoration: underline;
                       }
                    }
                }
            }
        }
    }
}
.el-pagination{
    margin-top: 20px;
}
</style>